<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8" />

  <!-- 
  
  Using Web Font Specimen =======================================================
  
  1. Add your typeface(s) to your specified "fonts" folder.
     - This is already specified as "fonts_dir" in your "config.rb" file.
     - Or link to fonts from google, typekit, or other services

  2. For multiple specimens
     - Duplicate `_type_specimen_1.scss`
     - add @import "_type_specimen_NEW_NUMBER.scss;" to specimen.scss 

  3. Add your font name and file path to "$font-name" and "$font-file-name" to "_type_specimen_1.scss"
    - Optional: add your `$pretty-font-name` (displays on the `specimen.html` page)

  4. Make adjustments to "specimen.html"
     - For multiple specimens duplicate and rename for each font being sure to change the stylesheet link as needed.

  5. Enjoy!
     
  ==============================================================================
  
  -->
  
  <!-- http://www.phpied.com/conditional-comments-block-downloads/ -->
  <!--[if IE]><![endif]-->

  <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
  <!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1"><![endif]-->

  <title>Web Font Specimen</title>
  <link rel="stylesheet" href="css/specimen.css" type="text/css" media="screen" charset="utf-8">

</head>


<body>
<div id="header" class="container_16 clearfix">


<!-- NAME OF TYPEFACE -->
<div class="grid_16">
	<h1><span>{FONT NAME}</span></h1> 
</div>


<!-- TEXT SAMPLE -->
<div class="grid_8">
	<h2>Text sample <span>&#8211; CSS font-size (px) with 1.4em line-height</span></h2>
	<p class="s s18"><span>18</span> Is not the best kind of originality that which comes after a sound apprenticeship? That which shall prove to be the blending of a firm conception of, &#8220;useful precedent&#8221;&hellip;</p>
	<p class="s s16"><span>16</span> Is not the best kind of originality that which comes after a sound apprenticeship? That which shall prove to be the blending of a firm conception of, &#8220;useful precedent&#8221; and the progressive&hellip;</p>
	<p class="s s14"><span>14</span> Is not the best kind of originality that which comes after a sound apprenticeship? That which shall prove to be the blending of a firm conception of, &#8220;useful precedent&#8221; and the progressive tendencies of&hellip;</p>
	<p class="s s13"><span>13</span> Is not the best kind of originality that which comes after a sound apprenticeship? That which shall prove to be the blending of a firm conception of, &#8220;useful precedent&#8221; and the progressive tendencies of an able mind. For, let&hellip;</p>
	<p class="s s12"><span>12</span> Is not the best kind of originality that which comes after a sound apprenticeship? That which shall prove to be the blending of a firm conception of, &#8220;useful precedent&#8221; and the progressive tendencies of an able mind. For, let a man be as able &amp; original&hellip;</p>
	<p class="s s11"><span>11</span> Is not the best kind of originality that which comes after a sound apprenticeship? That which shall prove to be the blending of a firm conception of, &#8220;useful precedent&#8221; and the progressive tendencies of an able mind. For, let a man be as able &amp; original as he may&hellip;</p>
	<p class="s s10"><span>10</span> Is not the best kind of originality that which comes after a sound apprenticeship? That which shall prove to be the blending of a firm conception of, &#8220;useful precedent&#8221; and the progressive tendencies of an able mind. For, let a man be as able &amp; original as he may, he can&#8217;t afford to discard knowledge of what&hellip;</p>
	<p class="s s9"><span>9</span> Is not the best kind of originality that which comes after a sound apprenticeship? That which shall prove to be the blending of a firm conception of, &#8220;useful precedent&#8221; and the progressive tendencies of an able mind. For, let a man be as able &amp; original as he may, he can&#8217;t afford to discard knowledge of what has gone before or what is now going&hellip;</p>
</div>


<!-- CHARACTER SET -->
<div class="grid_8 charset">
	<h2>Characters</h2>
	<p class="s s56">A&#8201;B&#8201;C&#8201;D&#8201;E&#8201;F&#8201;G&#8201;H&#8201;I&#8201;J&#8201;K&#8201;L&#8201;M&#8201;N&#8201;O&#8201;P&#8201;Q&#8201;R&#8201;S&#8201;T&#8201;U&#8201;V&#8201;W&#8201;X&#8201;Y&#8201;Z<br />
	a&#8201;b&#8201;c&#8201;d&#8201;e&#8201;f&#8201;g&#8201;h&#8201;i&#8201;j&#8201;k&#8201;l&#8201;m&#8201;n&#8201;o&#8201;p&#8201;q&#8201;r&#8201;s&#8201;t&#8201;u&#8201;v&#8201;w&#8201;x&#8201;y&#8201;z<br />
	1&#8201;2&#8201;3&#8201;4&#8201;5&#8201;6&#8201;7&#8201;8&#8201;9&#8201;0&#8201;&amp;&#8201;@&#8201;.&#8201;,&#8201;?&#8201;!&#8201;&#8217;&#8201;&#8220;&#8201;&#8221;&#8201;(&#8201;)</p>
</div>
</div><!-- end .container_16 -->


<!-- BODY SIZE COMPARISON -->
<div class="container_16 clearfix">
<div class="grid_16">
	<h2>Body size comparison</h2>

	<div class="bodysize">
		<table>
		<tr>
			<th><span>{FONT NAME}</span></th>
			<th>Arial <a href="http://www.codestyle.org/servlets/FontStack?stack=Arial,Helvetica&generic=sans-serif">stack</a></th>
			<th>Times <a href="http://www.codestyle.org/servlets/FontStack?stack=Times+New+Roman,Times&generic=serif">stack</a></th>
			<th>Georgia <a href="http://www.codestyle.org/servlets/FontStack?stack=Georgia,New+Century+Schoolbook,Nimbus+Roman+No9+L&generic=serif">stack</a></th>
		</tr>
		<tr>
			<td><span>Body</span></td>
			<td class="tf typeface2"><span>Body</span></td>
			<td class="tf typeface3"><span>Body</span></td>
			<td class="tf typeface4"><span>Body</span></td>
		</tr>
		</table>	
	</div><!-- end .bodysize -->

</div>
</div><!-- end .container-16 -->


<!-- GRAYSCALE -->

<div class="container_16 clearfix">
<div class="grid_16 clearfix">
	<h2>Grayscale <span>&#8211; CSS hex color</span></h2>
</div>

<div class="grayscale clearfix">
<div class="grid_8 white">
	<p class="c000"><span>#000</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
	<p class="c333"><span>#333</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
	<p class="c666"><span>#666</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
	<p class="c999"><span>#999</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
	<p class="cCCC"><span>#CCC</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
</div>

<div class="grid_8 black">
	<p class="cFFF"><span>#FFF</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
	<p class="cCCC"><span>#CCC</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
	<p class="c999"><span>#999</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
	<p class="c666"><span>#666</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
	<p class="c333"><span>#333</span>The best kind of originality is that which comes after a sound apprenticeship, that which shall prove to be the blending of a firm conception of useful precedent and the progressive tendencies of an able mind. For, let a man be as able and original as he may, he cannot afford to</p>
</div>
</div><!-- end .grayscale -->
</div><!-- end .container-16 -->


<!-- SIZE U&LC -->
<div class="container_16 ulc clearfix">
<div class="grid_16">
	<h2>Size <span>&#8211; CSS font-size (px)</span></h2>
	<p class="s s36"><span>36</span> <span class="text">Pack my box with five dozen liquor jugs.</span></p>
	<p class="s s30"><span>30</span> <span class="text">Pack my box with five dozen liquor jugs.</span></p>
	<p class="s s24"><span>24</span> <span class="text">Pack my box with five dozen liquor jugs.</span></p>
</div><div class="clearfix"></div>
<div class="grid_10">
	<p class="s s21"><span>21</span> <span class="text">Pack my box with five dozen liquor jugs.</span></p>
	<p class="s s18"><span>18</span> <span class="text">Pack my box with five dozen liquor jugs.</span></p>
</div>
<div class="grid_6 upp">
	<p class="s s9"><span>9</span> <span class="text">Pack my box with five dozen liquor jugs</span></p>
	<p class="s s10"><span>10</span> <span class="text">Pack my box with five dozen liquor jugs</span></p>
</div><div class="clearfix"></div>
<div class="grid_8">
	<p class="s s16"><span>16</span> <span class="text">Pack my box with five dozen liquor jugs.</span></p>
	<p class="s s14"><span>14</span> <span class="text">Pack my box with five dozen liquor jugs.</span></p>
	<p class="s s13"><span>13</span> <span class="text">Pack my box with five dozen liquor jugs.</span></p>
</div>
<div class="grid_8 upp">
	<p class="s s11"><span>11</span> <span class="text">Pack my box with five dozen liquor jugs</span></p>
	<p class="s s12"><span>12</span> <span class="text">Pack my box with five dozen liquor jugs</span></p>
	<p class="s s13"><span>13</span> <span class="text">Pack my box with five dozen liquor jugs</span></p>
</div><div class="clearfix"></div>
<div class="grid_6">
	<p class="s s12"><span>12</span> <span class="text">Pack my box with five dozen liquor jugs.</span></p>
	<p class="s s11"><span>11</span> <span class="text">Pack my box with five dozen liquor jugs.</span></p>
	<p class="s s10"><span>10</span> <span class="text">Pack my box with five dozen liquor jugs.</span></p>
	<p class="s s9"><span>9</span> <span class="text">Pack my box with five dozen liquor jugs.</span></p>
</div>
<div class="grid_10 upp">
	<p class="s s14"><span>14</span> <span class="text">Pack my box with five dozen liquor jugs</span></p>
	<p class="s s16"><span>16</span> <span class="text">Pack my box with five dozen liquor jugs</span></p>
	<p class="s s18"><span>18</span> <span class="text">Pack my box with five dozen liquor jugs</span></p>
</div><div class="clearfix"></div>
<div class="grid_16 upp">
	<p class="s s21"><span>21</span> <span class="text">Pack my box with five dozen liquor jugs</span></p>
	<p class="s s24"><span>24</span> <span class="text">Pack my box with five dozen liquor jugs</span></p>
	<p class="s s30"><span>30</span> <span class="text">Pack my box with five dozen liquor jugs</span></p>
</div>
</div><!-- end .container_16 -->


<!-- ABOUT -->
<div id="footer" class="container_12">
<div class="grid_6 suffix_6">
	<p>This web font specimen is brought to you by <a href="http://nicewebtype.com/">Nice Web Type</a>.<br />
	Ported for <a href="http://www.sass-lang.com">Sass</a>/<a href="http://www.compass-style.org/">Compass</a> by <a href="http://www.oddbird.net/">Eric Meyer</a>.<br />
	<a href="http://webfontspecimen.com/">Grab a copy and test your type</a>. Licensed via <a rel="license" href="http://creativecommons.org/licenses/by/3.0/us/">Creative Commons</a>.</p>
</div>
</div><!-- end #footer -->

</body>
</html>